<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="layout" uri="http://code.google.com/p/layout4j/" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml" xmlns:cms="http://code.google.com/p/layout4j/" lang="en-GB">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/css/admin.css"/>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/css/ui-lightness/jquery-ui-1.8.4.custom.css"/>
	<script type="text/javascript" src="${pageContext.request.contextPath}/admin/js/jquery.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/admin/js/jquery-ui-1.8.4.custom.min.hacked.js"></script>
	<title>Layout4j editor example</title>
	<script type="text/javascript">
		var layout4j = {
			"contentBaseUrl": "${pageContext.request.contextPath}/content.jsp?",
			"contentSelector": "div[cms-type='content']",
			"columnSelector": "div[cms-type='column']",
			"rowSelector": "div[cms-type='row']",
			"asideSelector": "div[cms-aside='true']"
		};
	</script>
	<!-- 
	Typically, you want the admin-specific layout styles but the same styles for content fragments.
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/layout.css"/>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/css/core/assets.css"/>
	-->
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/content.css"/>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/css/layout-editor.css"/>      
	<script type="text/javascript" src="${pageContext.request.contextPath}/admin/js/layout-editor.js"></script>
	<script type="text/javascript"><!--
		jQuery(document).ready(function() {
			
			/* Initialise page */
			enableEdit();
	
			// Dialog can be given a fixed position using this extension
			// http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010
			//jQuery(".toolbar").dialog({ position: ['right', 'top'] });
			jQuery("#toolbar").resizable().draggable();//.position({ my: "top right", at: "top right", of: "#grid" });
	
			jQuery(".assetRef").draggable({opacity: 0.7, helper: 'clone'});
	
			initDroppable();

			//jQuery("#toolbar").ajaxError(function(event, request, settings){
			jQuery(this).ajaxError(function(event, request, settings){
				alert("Error requesting page " + settings.url);
			});
		});

		function saveLayout(pageId, formEl) {
			jQuery("#cms-save-button").attr("disabled", "disabled");
			jQuery.post('save.jsp', {pageId: pageId, markup: jQuery("#layout-editor").html()}, 
				function (data, textStatus) {
					jQuery("#cms-save-button").removeAttr("disabled");
					var now = new Date();
					jQuery("#cms-save-time").html(now.getHours() + ":" + now.getMinutes());
					jQuery("#cms-save-info").removeClass("hidden").addClass("visible");
				}
			);
			return false;
		}

		function toggleEdit(inputEl) {
			if (!jQuery(inputEl).attr('checked')) {
				disableEdit();
			} else {
				enableEdit();
			}
		}
	</script>  
</head>
<body>
	<h1>Layout editor example</h1>
	
	<c:set var="exampleLayoutML">
		<layout max-cols="3">
			<column max-cols="2">
				<!-- 
				<row>
				  	<column>
				  		<content data-id="1" data-type="1" style="1"/>
				  		<content data-id="2" data-type="1" style="1"/>
				  	</column>
				  	<column>
				  		<content data-id="3" data-type="1" style="2"/>
				  	</column>
				</row>
				 -->
				<row>
				  	<content data-id="4" data-type="1" style="3"/>
				</row>
				<row>
				  	<column>
				  		<content data-id="1" data-type="1" style="1"/>
				  		<content data-id="2" data-type="1" style="1"/>
				  	</column>
				  	<column>
				  		<content data-id="3" data-type="1" style="2"/>
				  	</column>
				</row>
			</column>
			<column max-cols="1" aside="true">
				<content data-id="1" data-type="1" style="1"/>
			</column>
		</layout>
	</c:set>
	
	<%-- XXX: Unhardcode URL --%>
	<layout:renderDefaultEditor source="${exampleLayoutML}" contentBaseUrl="http://localhost:8080/layout4j/content.jsp?" 
			timeoutMillis="5000" contentServerCheckUrl="private/server-health.html"/>
	<!-- End of grid -->
	
	<div id="toolbar" class="ui-widget ui-widget-content">
		<div class="ui-widget-header">Tools</div>
		<form>
			<div class="cms-toolbar-tab">
				<input id="cms-save-button" type="button" value="Save layout" onclick="alert('LayoutML:\n' + jQuery('#layout-editor').html()); saveLayout(1, this);" /> |
				Show headers <input type="checkbox" name="edit" checked="checked" onclick="toggleEdit(this)" />
				<div id="cms-save-info" class="hidden">Saved at <span id="cms-save-time"></span></div>
			</div>
		</form>
		<h4>Latest content:</h4>
		<ul class="styled article">
			<%-- This markup to be generated from the database --%>
			<li class="assetRef" cms-params="dataId=1&amp;dataTypeId=1&amp;styleId=1" title="Drag me!">Test article 1</li>
			<li class="assetRef" cms-params="dataId=2&amp;dataTypeId=1&amp;styleId=1" title="Drag me!">Test article 2</li>
		</ul>
	</div>

	<div id="data">
		<p>Data:</p>
		<%-- This markup to be generated from the database --%>
		<div id="cms-asset-type1"><%-- XXX: Rename "cms-data-type1" --%>
			<select onchange="changeAssetTemplate(this)">
				<option value="1" style-width="1">Normal</option>
				<option value="2" style-width="2">High</option>
				<option value="3" style-width="3">Wide</option>
			</select>
		</div>
		<div id="cms-asset-type2">
			<select onchange="changeAssetTemplate(this)">
				<option value="4" style-width="1">Medium</option>
				<option value="5" style-width="2">Big</option>
			</select>
		</div>
	</div>
</body>
</html>